<!--
 * @description 职工福利子账户选择
 * @author dumeng
 * @date 2021/7/28
 -->
<template>
  <div v-if="visible" class="zgflzzh-page">
    <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="职工福利子账户" fullscreen center :before-close="handleCancel">
      <section class="select-inner">
        <section class="main-add">
          <el-form ref="form" class="zgflzzh-create-form" :model="form" :rules="rules" label-width="180px">
            <el-form-item label="子账户名称" prop="subAcntNm">
              <el-input v-model.trim="form.subAcntNm" placeholder="请输入子账户名称" style="width: 60%;margin-right: 30px" />
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
          </el-form>
        </section>
        <section class="main-table">
          <v-table :list="list" tag="accountmain" :list-loading="listLoading" :selection="false" :filter-column="filtercolumn">
            <el-table-column label="操作" fixed="right" align="center" min-width="100" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleSelect(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </v-table>
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { insert, queryPage } from '@/views/welfare/accounttwo/api'
import VTable from '@/components/Table'
export default {
  name: 'Zgflzzh',
  components: { VTable },
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      form: {
        subAcntNm: ''
      },
      rules: {
        subAcntNm: [
          { required: true, message: '请输入子账户名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            insert(this.form).then(() => {
              loading.close()
              this.$message({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 1500
              })
              this.getList()
            }).catch(error => {
              reject(error)
              loading.close()
            })
          })
        }
      })
    },
    handleCancel() {
      this.$emit('update:visible', false)
      this.$bus.$emit('refresh')
    },
    handleSelect(row) {
      this.$emit('select', row.subAcntTp)
    },
    filtercolumn(scope, item) {
      if (item === 'subAcntSt') {
        return (scope.row[item] === 0 || scope.row[item] === '0') ? '可用' : '不可用'
      } else if (item === 'subAcntStartTm' || item === 'subAcntEndTm') {
        if (scope.row[item]) {
          return scope.row[item].replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5:$6')
        } else {
          return ''
        }
      } else if (item === 'balance') {
        return scope.row[item] ? scope.row[item] : ''
      } else {
        return scope.row[item]
      }
    },
    getList() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        queryPage({ isOpen: 1 }).then(response => {
          this.list = response.data.data || []
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
.zgflzzh-page {
  position: relative;
  .el-dialog__body {
    max-height: calc(100vh - 109px);
    min-height: calc(100vh - 109px);
    position: relative;
    .zgflzzh-create-form {
      margin-top: 0;
    }
  }
}
</style>
